<template>
  <el-dialog
    title="修改用户"
    :close-on-click-modal="false"
    :visible.sync="showModal"
    @close="cancel"
    width="800px"
  >
    <div class="roleWarps" v-loading="loading" :element-loading-text="loadingText">
      <el-form
        ref="formDataRefs"
        :model="dialogForm"
        :rules="dialogFormRule"
        label-width="100px"
        label-position="left"
      >
      <!-- 状态 标签 -->
        <el-form-item label="状态:" prop="status">
          <el-radio-group v-model="dialogForm.status">
            <el-radio label="1">禁用</el-radio>
            <el-radio label="0">启用</el-radio>
          </el-radio-group>
        </el-form-item>
<!--        <el-form-item label="用户标签:">-->
<!--          <el-select-->
<!--            size="small"-->
<!--            clearable-->
<!--            v-model="dialogForm.userLabelTag"-->
<!--            placeholder="请选择用户标签"-->
<!--          >-->
<!--            <el-option-->
<!--              v-for="dict in dictArrs.user_label"-->
<!--              :key="dict.dictId"-->
<!--              :label="dict.label"-->
<!--              :value="dict.value"-->
<!--            />-->
<!--          </el-select>-->
<!--        </el-form-item>-->
      </el-form>
      <div class="right_roles">
        <h4>角色权限</h4>
        <div class="tree_warps_overscroll">
          <el-scrollbar style="height:100%">
            <el-checkbox-group v-model="dialogForm.roleIdList">
              <el-checkbox
                v-for="(item,index) in roleList"
                :key="index"
                :label="item.roleId"
              >{{item.roleName}}
            </el-checkbox>
            </el-checkbox-group>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div slot="footer" class="footer_dialog">
      <el-button size="small" @click="cancel">取消</el-button>
      <el-button size="small" @click="saveUserInfo" type="primary" :loading="loading">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { _getUserInfo, _editUserInfo } from '_api'
import vueState from '@lib/vuexState'

export default {
  props: {
    userId: {
      type: String,
      default: ''
    }
  },

  mixins: [vueState],

  data() {
    return {
      showModal: false,
      loading: false,
      loadingText: '保存中...',
      dialogForm: {
        status: '',
        userLabelTag: '',
        roleIdList: []
      },
      dialogFormRule: {},
      roleList: []
    }
  },

  watch: {
    showModal: {
      handler(val) {
        if (val) this.getRole()
      },
      immediate: true
    }
  },

  methods: {
    //  保存修改用户
    saveUserInfo() {
      this.$refs.formDataRefs.validate(async (valid) => {
        if (valid) {
          let data = JSON.parse(JSON.stringify(this.dialogForm))
          if (data.roleIdList.length <= 0) {
            return this.$message.error('请选择用户角色')
          }
          this.loading = true
          this.loadingText = '保存用户中...'
          let res = (await _editUserInfo(data))
          if (res && res.code == '0') {
            this.$message.success(res.msg)
            this.$emit('success')
            this.cancel()
          }
        }
      })
    },
    getRole() {
      this.loading = true
      this.loadingText = '查询角色中...'
      _getUserInfo(this.userId).then(res => {
        let datas = res.data
        this.dialogForm = Object.assign(this.dialogForm, {
          userId: datas.userId,
          userLabelTag: datas.userLabelTag,
          status: datas.status,
          roleIdList: datas.roleIdList
        })
        this.$http.post('/cms/auth/role/select').then(roleResult => {
          if (roleResult && roleResult.code == 0) {
            this.roleList = roleResult.data
            this.loading = false
          }
        })
      })
    },
    cancel() {
      this.showModal = false
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
.roleWarps {
  display: flex;
  justify-content: space-between;
  .right_roles {
    width: 300px;
    flex-shrink: 0;
    h4 {
      padding-bottom: 10px;
      margin-bottom: 20px;
      border-bottom: 1px solid @base-color;
    }
    .tree_warps_overscroll {
      height: 120px;
      overflow-y: auto;
    }
  }
}
</style>
